<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>海南热带雨林</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../layui/css/layui.css" rel="stylesheet">
    <style>
        table {
            text-align: center;
        }

        .layui-table-cell {
            text-align: center !important;
        }

        .layui-layout-admin .layui-header, .layui-btn, .layui-bg-black, .layui-nav, .layui-laypage .layui-laypage-curr .layui-laypage-em {
            background-color: #003078 !important;
        }

        .layui-layout-admin .layui-logo {
            width: 100%;
        }

        .layui-form-item {
            display: inline-block;
        }

        #query, #add {
            position: absolute;
            height: 37px;
            line-height: 37px;
            margin-left: 15px;
        }

        #add {
            margin-left: 95px;
        }


        .layui-header {
            height: 80px !important;
        }

        .layui-layout-admin .layui-side, .layui-layout-admin .layui-body {
            top: 80px !important;
        }

        .layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a, .layui-nav-tree .layui-this, .layui-nav-tree .layui-this > a, .layui-nav-tree .layui-this > a:hover {
            background-color: #01aaed;
        }

        .layadmin-pagetabs {
            top: 80px !important;
        }
    </style>
</head>

<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black"
             style="text-align: left;font-size: 27px;margin: 0 0 0 15px;}">
            <img src="./暂降治理/imgs/nflogo.png">
            海南电网公司电能质量监测系统
        </div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="javascript:;">
                    xx专员
                </a>
            </li>

        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                        <dd class="layui-this">
                            <a href="javascript:;" id="default" class="link-active" lay-href="./暂降治理/暂降数据查看.html" data-id="首页" data-title="首页" >
                                <i class="layui-icon layui-icon-home"></i>
                                <span>
                                首页
                                </span>
                            </a>
                        </dd>
                </li>

                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;"><i class="layui-icon layui-icon-unlink"></i>
                        <span>暂态治理决策</span></a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="javascript:;" class="link-active" lay-href="./暂降治理/用户管理.html" data-id="用户管理" data-title="用户管理" >
                            <i class="layui-icon layui-icon-user"></i>
                                <span>
                                用户管理
                                </span>
                            </a>
                        </dd>
                        <dd>
                            <a href="javascript:;" class="link-active" lay-href="./暂降治理/治理决策.html" data-id="治理决策" data-title="治理决策">
                                <i class="layui-icon layui-icon-util"></i>
                                <span>
                                    治理决策
                                </span>
                            </a>
                        </dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <div class="layui-tab" lay-filter="tables" lay-allowclose="true" style="margin-top: 0 !important;">
            <ul class="layui-tab-title"></ul>
            <div class="layui-tab-content"></div>
        </div>
        <!-- 内容主体区域 -->

        <div class="layui-footer">
            <!-- 底部固定区域 -->
            底部固定区域
        </div>
    </div>

    <script src="../layui/layui.js"></script>

    <script>//JavaScript代码区域
    layui.use(['element', 'layer', 'jquery'], function () {
        var element = layui.element;
        var $ = layui.jquery;

        //定义函数 绑定增加tab，删除tab，切换tab几项事件
        var tabFunction = {
            //新增tab url 页面地址 id 对应data-id name标题
            tabAdd: function (url, id, name) {
                element.tabAdd('tables', {
                    title: name,
                    content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:800px"></iframe>',
                    id: id
                });
            },
            //根据id切换tab
            tabChange: function (id) {
                element.tabChange('tables', id)
            },
            //关闭指定的tab
            tabDelete: function (id) {
                element.tabDelete('tables', id)
            }
        }

        //默认打开首页
        var defaultMenu = $("#default");
        tabFunction.tabAdd(defaultMenu.attr('lay-href'), defaultMenu.attr('data-id'), defaultMenu.attr('data-title'));
        //转到要打开的tab
        tabFunction.tabChange(defaultMenu.attr('data-id'));


        //左侧菜单点击事件
        $('.link-active').on('click', function () {
            var dataid = $(this);
            //判断右侧是否有tab
            if ($('.layui-tab-title li[lay-id]').length <= 0) {
                tabFunction.tabAdd(dataid.attr('lay-href'), dataid.attr('data-id'), dataid.attr('data-title'));
            } else {
                //判断tab是否已经存在
                var isExist = false;
                $.each($('.layui-tab-title li[lay-id]'), function () {
                    //筛选id是否存在
                    if ($(this).attr('lay-id') == dataid.attr("data-id")) {
                        isExist = true;
                    }
                });
                //不存在，增加tab
                if (isExist == false) {
                    tabFunction.tabAdd(dataid.attr('lay-href'), dataid.attr('data-id'), dataid.attr('data-title'));
                }
            }
            //转到要打开的tab
            tabFunction.tabChange(dataid.attr('data-id'));

        });


    });
    </script>

</body>

</html>